<!DOCTYPE html>
<meta charset='utf-8'>
<style>
span { background-color: red;}
.inline-block { background-color: red; display: inline-block;}
.single-width { letter-spacing: 1em; }
.double-width { letter-spacing: 2em; }
.rtl { direction: rtl; border: 1px solid black;}
.ltr { direction: ltr; border: 1px solid black;}
.section { break-inside: avoid; }
</style>
<p>crbug.com/267056: Handle leading and trailing letter-spacing correctly. Mixed flow text below is not yet correct.</p>
<div style="columns:2; -moz-columns: 2; height: 900px;">
  <div style="width: 150px">
    <div class="section">
      <p>LTR Flow - LTR text</p>
      <div class="ltr">
        <div class="single-width inline-block">aaa</div>
        <p class="single-width">a<span class="double-width">bb</span>c</p>
        <p class="single-width">a<span class="double-width">b</span>c</p>
        <p class="single-width">a<span>bb</span>c</p>
      </div>
    </div>
    <div class="section">
      <p>LTR Flow - RTL text</p>
      <div class="ltr">
        <div class="single-width inline-block">אבג</div>
        <p class="single-width">א<span class="double-width">בב</span>ג</p>
        <p class="single-width">א<span class="double-width">ב</span>ג</p>
        <p class="single-width">א<span>בב</span>ג</p>
      </div>
    </div>
    <div class="section">
      <p>RTL Flow - RTL text</p>
      <div class="rtl">
        <div class="single-width inline-block">אבג</div>
        <p class="single-width">א<span class="double-width">בב</span>ג</p>
        <p class="single-width">א<span class="double-width">ב</span>ג</p>
        <p class="single-width">א<span>בב</span>ג</p>
      </div>
    </div>
    <div class="section">
      <p>RTL Flow - LTR text</p>
      <div class="rtl">
        <div class="single-width inline-block">aaa</div>
        <p class="single-width">a<span class="double-width">bb</span>c</p>
        <p class="single-width">a<span class="double-width">b</span>c</p>
        <p class="single-width">a<span>bb</span>c</p>
      </div>
      <p>LTR Flow - LTR/RTL Text</p>
      <div class="ltr">
        <div class="single-width inline-block">אcא</div>
        <p class="single-width">ab<span class="double-width">cא</span>בג</p>
        <p class="single-width">ab<span class="double-width">c</span>בג</p>
        <p class="single-width">ab<span>cא</span>בג</p>
      </div>
      <p>RTL Flow - LTR/RTL Text</p>
      <div class="rtl">
        <div class="single-width inline-block">אcא</div>
        <p class="single-width">ab<span class="double-width">cא</span>בג</p>
        <p class="single-width">ab<span class="double-width">c</span>בג</p>
        <p class="single-width">ab<span>cא</span>בג</p>
      </div>
    </div>
  </div>
</div>
